<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>城市选择组件</title>
	<link rel="stylesheet" type="text/css" href="css/city-select.css">
</head>
<body>
	
	<h2>城市单选</h2>
	<div class="city-select" id="single-select-1">
		<div class="city-info">
			<div class="city-name">
				<span>北京市</span>
				<span>北京市</span>
				<span>北京市</span>
				<span>北京市</span>
			</div>
			<div class="city-input">
				<input type="text" class="input-search" value="" placeholder="请选择城市" />
			</div>
		</div>
		<ul class="city-list hide">
			<li class="caller active"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
			<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
			<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
			<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
			<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
			<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
			<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
			<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
		</ul>
		<div class="city-pavilion hide">
			<div class="city-tabs">
				<a href="javascript:;" class="active">热门城市</a>
				<a href="javascript:;">AB</a>
				<a href="javascript:;">CD</a>
				<a href="javascript:;">EFG</a>
				<a href="javascript:;">H</a>
				<a href="javascript:;">J</a>
				<a href="javascript:;">KL</a>
				<a href="javascript:;" class="forbid">MNP</a>
				<a href="javascript:;">QR</a>
				<a href="javascript:;">S</a>
				<a href="javascript:;">T</a>
				<a href="javascript:;">W</a>
				<a href="javascript:;">X</a>
				<a href="javascript:;">Y</a>
				<a href="javascript:;">Z</a>
			</div>
			<div class="city-cont">
				<dl class="city-HOT">
					<dd>
						<a href="javascript:;">北京市</a>
						<a href="javascript:;">北京市</a>
						<a href="javascript:;">北京市</a>
						<a href="javascript:;">北京市</a>
						<a href="javascript:;">北京市</a>
						<a href="javascript:;">北京市</a>
						<a href="javascript:;">北京市</a>
						<a href="javascript:;">北京市</a>
						<a href="javascript:;">北京市</a>
						<a href="javascript:;">北京市</a>
						<a href="javascript:;">北京市</a>
						<a href="javascript:;">北京市</a>
						<a href="javascript:;">北京市</a>
						<a href="javascript:;">北京市</a>
						<a href="javascript:;">北京市</a>
						<a href="javascript:;">北京市</a>
						<a href="javascript:;">北京市</a>
						<a href="javascript:;">北京市</a>
					</dd>
				</dl>
				<p>*可以直接搜索查找城市（支持名称、拼音模糊搜索）<a href="javascript:;">清空</a><span>5</span></p>
				<div class="city-tips">最多只能选择<span>5</span>项</div>
			</div>
		</div>
	</div><!-- end .city-select -->
	
	<div class="info">
		<h3>市县级数据</h3>
		<p>whole: true</p>
	</div>
	<div class="info">
		<h3>单选</h3>
		<p>multiSelect: false</p>
	</div>
	<div class="info">
		<h3>简称</h3>
		<p>shorthand: true</p>
	</div>
	<div class="info">
		<h3>开启搜索功能</h3>
		<p>search: true</p>
	</div>
	<div class="info">
		<h3>设置城市默认</h3>
		<p>singleSelect1.setCityVal('北京市');</p>
	</div>

	<h2>城市单选-只读</h2>
	<div class="city-select" id="single-select-2"></div><!-- end .city-select -->

	<div class="info">
		<h3>设置城市默认</h3>
		<p>singleSelect2.setCityVal('北京市');</p>
	</div>
	<div class="info">
		<h3>只读</h3>
		<p>singleSelect2.showStatus('readonly');</p>
	</div>

	<h2>城市单选-禁止</h2>
	<div class="city-select" id="single-select-3"></div><!-- end .city-select -->

	<div class="info">
		<h3>设置城市默认</h3>
		<p>singleSelect3.setCityVal('广州市');</p>
	</div>
	<div class="info">
		<h3>禁止</h3>
		<p>singleSelect3.showStatus('disabled');</p>
	</div>

	<h2>城市多选</h2>
	<div class="city-select" id="multi-select-1"></div><!-- end .city-select -->

	<div class="info">
		<h3>市级数据</h3>
		<p>whole: false</p>
	</div>
	<div class="info">
		<h3>开启多选功能</h3>
		<p>multiSelect: true</p>
	</div>
	<div class="info">
		<h3>设置最多可选择的个数</h3>
		<p>multiMaximum: 6</p>
	</div>
	<div class="info">
		<h3>关闭搜索功能</h3>
		<p>search: false</p>
	</div>
	<div class="info">
		<h3>设置城市默认</h3>
		<p>MulticitySelect1.setCityVal('北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市');</p>
	</div>

	<h2>城市多选-自定义热门城市-搜索</h2>
	<div class="city-select" id="multi-select-2"></div><!-- end .city-select -->

	<div class="info">
		<h3>市级数据</h3>
		<p>whole: false</p>
	</div>
	<div class="info">
		<h3>开启多选功能</h3>
		<p>multiSelect: true</p>
	</div>
	<div class="info">
		<h3>自定义热门城市</h3>
		<p>hotCity: ['北京市', '上海市', '广州市', '深圳市', '南京市', '杭州市', '天津市', '重庆市', '成都市', '青岛市', '苏州市', '无锡市', '常州市', '温州市', '武汉市', '长沙市', '石家庄市', '南昌市', '三亚市', '合肥市']</p>
	</div>
	<div class="info">
		<h3>开启搜索功能</h3>
		<p>search: true</p>
	</div>

	<h2>Options</h2>
	<div class="info">
		<table border="0" width="100%">
			<tr>
				<th>名称</th>
				<th>类型</th>
				<th>默认</th>
				<th>描述</th>
			</tr>
			<tr>
				<td>dataJson</td>
				<td>[Array]</td>
				<td>默认空</td>
				<td>城市数据源</td>
			</tr>
			<tr>
				<td>convert</td>
				<td>[Boolean]</td>
				<td>true(转换)</td>
				<td>转换数据，引入的数据源是citydata.js就需要转换；引入的是newcitydata.js就不需要</td>
			</tr>
			<tr>
				<td>whole</td>
				<td>[Boolean]</td>
				<td>false(市级)</td>
				<td>显示市县级数据还是只显示市级数据，如果开启这个，需引入的数据源是citydata.js数据源才可以。</td>
			</tr>
			<tr>
				<td>shorthand</td>
				<td>[Boolean]</td>
				<td>false(全称)</td>
				<td>名称的全称、简称</td>
			</tr>
			<tr>
				<td>multiSelect</td>
				<td>[Boolean]</td>
				<td>false(单选)</td>
				<td>多选、单选</td>
			</tr>
			<tr>
				<td>search</td>
				<td>[Boolean]</td>
				<td>true(搜索)</td>
				<td>开启搜索</td>
			</tr>
			<tr>
				<td>multiMaximum</td>
				<td>[Number]</td>
				<td>5(最多可选5个城市)</td>
				<td>最多可选的城市个数(多选)</td>
			</tr>
			<tr>
				<td>multiType</td>
				<td>[Number]</td>
				<td>0(多行)</td>
				<td>值允许1或者0；只用于多选，选中的值显示是一行还是多行</td>
			</tr>
			<tr>
				<td>placeholder</td>
				<td>[String]</td>
				<td>'请选择城市'</td>
				<td>默认的提示语</td>
			</tr>
			<tr>
				<td>searchPlaceholder</td>
				<td>[String]</td>
				<td>'输入关键词搜索'</td>
				<td>搜索文本框默认的提示语</td>
			</tr>
			<tr>
				<td>hotCity</td>
				<td>[Array]</td>
				<td>[](取前面18条数据)</td>
				<td>热门城市显示数据，传就生成热门城市，没有就插件生成</td>
			</tr>
			<tr>
				<td>onInit</td>
				<td>[function]</td>
				<td>function () {}</td>
				<td>插件初始化后的回调</td>
			</tr>
			<tr>
				<td>onForbid</td>
				<td>[function]</td>
				<td>function () {}</td>
				<td>插件禁止后再点击的回调</td>
			</tr>
			<tr>
				<td>onTabsAfter</td>
				<td>[function]</td>
				<td>function (target) {}</td>
				<td>点击tabs切换显示城市后的回调</td>
			</tr>
			<tr>
				<td>onTabsForbid</td>
				<td>[function]</td>
				<td>function (target) {}</td>
				<td>tabs禁止后再点击的回调</td>
			</tr>
			<tr>
				<td>onCallerAfter</td>
				<td>[function]</td>
				<td>function (target, values) {}</td>
				<td>选择城市后的回调</td>
			</tr>
		</table>
	</div>

	<h2>Methods</h2>
	<div class="info">
		<h3>设置城市默认</h3>
		<p>setCityVal(val)</p>
		<p>传入的参数是用字符串的形式：'北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市'</p>
		<p class="careful">注意: 如果设置的城市超过multiMaximum设置的限制的个数，多出的是不会生效</p>
	</div>
	<div class="info">
		<h3>获取城市的值</h3>
		<p>getCityVal()</p>
		<p>可以拿到选中的城市的值</p>
		<p class="careful">注意: 只有在有选择城市的情况下，才能拿到城市的值或者是设置默认值后</p>
	</div>
	<div class="info">
		<h3>更新城市数据</h3>
		<p>update(data)</p>
		<p>栗子：singleSelect.update([{
			"id": "110100",
			"name": "北京市",
			"parentId": "110000",
			"shortName": "北京",
			"letter": "B",
			"cityCode": "010",
			"pinyin": "Beijing"
		},
		{
			"id": "120100",
			"name": "天津市",
			"parentId": "120000",
			"shortName": "天津",
			"letter": "T",
			"cityCode": "022",
			"pinyin": "Tianjin"
		}]);</p>
	</div>
	<div class="info">
		<h3>城市状态</h3>
		<p>status(status)</p>
		<p>参数是readonly或disabled</p>
	</div>
	<div class="info">
		<h3>清空所有选中的值</h3>
		<p>clear()</p>
	</div>
	<div class="info">
		<h3>绑定事件</h3>
		<p>bindEvent()</p>
	</div>
	<div class="info">
		<h3>销毁事件</h3>
		<p>unBindEvent()</p>
	</div>


	<script src="https://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script>
	<script type="text/javascript" src="js/citydata.min.js"></script>
	<script type="text/javascript" src="js/citySelect-1.0.3.js"></script>
	<script type="text/javascript">
	$(function() {

		// 单选
		var singleSelect1 = $('#single-select-1').citySelect({
			dataJson: cityData,
			multiSelect: false,
			whole: true,
			shorthand: true,
			search: true,
			onInit: function () {
				console.log(this)
			},
			onTabsAfter: function (target) {
				console.log(target)
			},
			onCallerAfter: function (target, values) {
				console.log(JSON.stringify(values))
			}
		});

		// 单选设置城市
		singleSelect1.setCityVal('北京市');

		// 单选
		var singleSelect2 = $('#single-select-2').citySelect({
			dataJson: cityData
		});

		// 单选设置城市
		singleSelect2.setCityVal('北京市');

		// 禁止点击显示的接口
		singleSelect2.status('readonly');

		//单选
		var singleSelect3 = $('#single-select-3').citySelect({
			dataJson: cityData
		});

		// 单选设置城市
		singleSelect3.setCityVal('广州市');

		// 禁止点击显示的接口
		singleSelect3.status('disabled');

		// 多选
		var MulticitySelect1 = $('#multi-select-1').citySelect({
			dataJson: cityData,
			multiSelect: true,
			multiMaximum: 6,
			search: false,
			onInit: function () {
				console.log(this)
			},
			onForbid: function () {
				console.log(this)
			},
			onTabsAfter: function (target) {
				console.log(event)
			},
			onCallerAfter: function (target, values) {
				console.log(JSON.stringify(values))
			}
		});

		// 多选设置城市接口
		MulticitySelect1.setCityVal('北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市');

		// 多选-自定义热门城市-搜索
		var MulticitySelect2 = $('#multi-select-2').citySelect({
			dataJson: cityData,
			multiSelect: true,
			search: true,
			multiType: 1,
			hotCity: ['北京市', '上海市', '广州市', '深圳市', '南京市', '杭州市', '天津市', '重庆市', '成都市', '青岛市', '苏州市', '无锡市', '常州市', '温州市', '武汉市', '长沙市', '石家庄市', '南昌市', '三亚市', '合肥市'],
			onInit: function () {
				console.log(this)
			},
			onForbid: function () {
				console.log(this)
			},
			onTabsAfter: function (target) {
				console.log(event)
			},
			onCallerAfter: function (target, values) {
				console.log(JSON.stringify(values))
			}
		});

		// 多选设置城市接口
		MulticitySelect2.setCityVal('北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市');

	});
	</script>
</body>
</html>